<template>
  <div class="app-container">
    <h2>低代码引擎示例</h2>
    <el-card>
      <div class="low-code-engine-container">
        <div class="status-panel">
          <div class="status-header">
            <h3>引擎状态</h3>
            <el-button type="primary" size="small" @click="refreshRender" :loading="status.loading">
              刷新渲染
            </el-button>
          </div>
          <div v-if="status.loading" class="status-loading">正在加载引擎...</div>
          <div v-if="status.error" class="status-error">
            <p>加载错误:</p>
            <pre>{{ status.errorMessage }}</pre>
          </div>
          <div v-if="status.loaded" class="status-loaded">引擎加载成功</div>
        </div>
        <div class="preview-wrapper">
          <PreviewRender ref="previewRef" @on-error="handleError" @on-loaded="handleLoaded" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import PreviewRender from './components/PreviewRender.vue'

// 状态对象
const status = ref({
  loading: true,
  loaded: false,
  error: false,
  errorMessage: ''
})

const previewRef = ref(null)

// 处理错误
const handleError = (error) => {
  status.value.error = true
  status.value.loading = false
  status.value.errorMessage = error instanceof Error ? error.toString() : JSON.stringify(error)
  console.error('低代码引擎加载错误:', error)
}

// 处理加载完成
const handleLoaded = () => {
  status.value.loading = false
  status.value.loaded = true
  console.log('低代码引擎加载完成')
}

// 刷新渲染
const refreshRender = async () => {
  if (previewRef.value) {
    // 重置状态
    status.value = {
      loading: true,
      loaded: false,
      error: false,
      errorMessage: ''
    }

    try {
      // 调用子组件的刷新方法
      await previewRef.value.refresh()
    } catch (error) {
      handleError(error)
    }
  }
}

// 错误处理函数
const handleGlobalError = (event) => {
  // 只处理与低代码相关的错误
  if (
    event.error &&
    (event.error.stack?.includes('lowcode') ||
      event.error.message?.includes('lowcode') ||
      event.error.message?.includes('renderer'))
  ) {
    handleError(event.error || event.message)
    event.preventDefault()
    event.stopPropagation()
  }
}

// 处理未捕获的Promise错误
const handleUnhandledRejection = (event) => {
  if (
    event.reason &&
    ((event.reason.stack &&
      (event.reason.stack.includes('lowcode') || event.reason.stack.includes('renderer'))) ||
      (event.reason.message &&
        (event.reason.message.includes('lowcode') ||
          event.reason.message.includes('Not Found') ||
          event.reason.message.includes('renderer'))))
  ) {
    handleError(event.reason)
    event.preventDefault()
  }
}

// 组件挂载时添加错误监听
onMounted(() => {
  window.addEventListener('error', handleGlobalError, true)
  window.addEventListener('unhandledrejection', handleUnhandledRejection, true)

  // 检查预加载资源
  console.log('低代码引擎初始化...')
})

// 组件卸载前移除错误监听
onBeforeUnmount(() => {
  window.removeEventListener('error', handleGlobalError, true)
  window.removeEventListener('unhandledrejection', handleUnhandledRejection, true)
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.low-code-engine-container {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .status-panel {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 15px;

    .status-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;

      h3 {
        margin: 0;
      }
    }

    .status-loading {
      color: #409eff;
    }

    .status-error {
      color: #f56c6c;

      pre {
        background-color: #fef0f0;
        padding: 10px;
        border-radius: 4px;
        font-size: 12px;
        overflow: auto;
        max-height: 200px;
      }
    }

    .status-loaded {
      color: #67c23a;
    }
  }

  .preview-wrapper {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    padding: 10px;
    min-height: 500px;
  }
}
</style>
